<template>
    <div>
        <div class="switch">
            <div class="switch-left">
                <div class="box1" v-for="(v, index) in obj" :key="index" @click="fun(index)">
                    <img :src="v.src" />
                    <span>{{ v.txt }}</span>
                </div>
            </div>
            <div class="switch-right">
                <div class="box1" v-for="(v, index) in obj1" :key="index">
                    <img :src="v.url" />
                    <span>{{ v.Txr }}</span>
                </div>
            </div>
        </div>
        <div class="bottom">
            <img src="https://pic.cdfgsanya.com/assets/upload/visual/fb5424f4976d43c6bcaaa1fa8c1e13de.png?1675593700887"
                alt="">
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            obj: [
                {
                    src: "https://pic.cdfgsanya.com/assets/upload/visual/9a679dae844810590a7274d6cdd7ec46.png?1672733335540",
                    txt: "护肤"
                },
                {
                    src: "https://pic.cdfgsanya.com/assets/upload/visual/f1e623a756133f47263ec39abf473fc1.png?1672733343676",
                    txt: "彩妆"
                },
                {
                    src: "https://pic.cdfgsanya.com/assets/upload/visual/c095fd65aed3a246b2ac587bfcab5975.png?1672733415327",
                    txt: "香水"
                },
                {
                    src: "https://pic.cdfgsanya.com/assets/upload/visual/aa449d54726de45f799ea18d5295dfad.png?1672733423774",
                    txt: "箱包"
                },
                {
                    src: "https://pic.cdfgsanya.com/assets/upload/visual/5ea97f014427190797b7c32b80ad58de.png?1672733434773",
                    txt: "腕表首饰"
                },
                {
                    src: "https://pic.cdfgsanya.com/assets/upload/visual/f888b0284520fe3dcde5c65d5e6e1e6f.png?1672733339350",
                    txt: "酒水"
                },
                {
                    src: "https://pic.cdfgsanya.com/assets/upload/visual/9b68b97488d7baaf2d0b5d229f02e410.png?1672733488317",
                    txt: "手机数码"
                },
                {
                    src: "https://pic.cdfgsanya.com/assets/upload/visual/9b68b97488d7baaf2d0b5d229f02e410.png?1672733488317",
                    txt: "点击领劵"
                },
                {
                    src: "https://pic.cdfgsanya.com/assets/upload/visual/9be34199e023c068ecf41d1881569e5d.png?1672733419876",
                    txt: "个护家居"
                },
                {
                    src: "https://pic.cdfgsanya.com/assets/upload/visual/f94db7cc8c5b7aec57742744e6e562f4.png?1672733427118",
                    txt: "国潮时尚"
                },
            ],
            obj1: [
                {
                    url: "https://pic.cdfgsanya.com/assets/upload/visual/e84467ec7ad2a0a0139beb114a1f0cc2.png?1672733443108",
                    Txr: "服饰鞋靴"
                },
                {
                    url: "https://pic.cdfgsanya.com/assets/upload/visual/e84467ec7ad2a0a0139beb114a1f0cc2.png?1672733443108",
                    Txr: "腕表首饰"
                },
                {
                    url: "https://pic.cdfgsanya.com/assets/upload/visual/46d4556a8ca0464ede27fb5301a3dd1a.png?1672733438131",
                    Txr: "食品"
                },
                {
                    url: "https://pic.cdfgsanya.com/assets/upload/visual/806c8b30caf1b9702f185810bc5a02df.png?1672733447498",
                    Txr: "全部分类"
                },

                {
                    url: "https://pic.cdfgsanya.com/assets/upload/visual/8ffc397cfd6ecb5239a02e8a218b5e7c.png?1672733459284",
                    Txr: "眼镜文具"
                },
                {
                    url: "https://pic.cdfgsanya.com/assets/upload/visual/c08b2754fe24fd15016d15aec14e491f.png?1672733472897",
                    Txr: "常见问题"
                },

            ]
        }
    },
    methods: {
        fun(index) {
            // this.$router.push("/xiang")
            console.log(index)
            if (index == 2) {
                this.$router.push("/xiang")
            } else if (index == 0) {
                this.$router.push("/hufu")
            } else if (index == 9) {
                this.$router.push("/Gcsspage")
            } else if (index == 1) {
                this.$router.push("/caizhuang")
            } else if (index == 4) {
                this.$router.push("/watch")
            }
        }
    }

}
</script>

<style scoped>
.switch {
    width: 100vw;
    height: 42.66666667vw;
    /* margin: auto;
    margin-top: 16vw; */
    display: flex;
    overflow: auto;
}

.switch .switch-left {
    width: 100%;
    flex-shrink: 0;
    display: flex;
    flex-wrap: wrap;
}

.switch .switch-right {
    width: 60%;
    flex-shrink: 0;
    display: flex;
    flex-wrap: wrap;
}

.switch .switch-left .box1 {
    width: 20%;
    height: 50%;
    /* background: yellow; */
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.switch .switch-right .box1 {
    width: 30%;
    height: 50%;
    /* background: yellow; */
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.switch .box1 img {
    width: 10.66666667vw;
    margin-bottom: 2.66666667vw;
}

.switch .box1 span {
    font-size: 3.2vw;
    color: #666666;
}

.bottom img {
    width: 355px;
    height: 133px;
    border-radius: 10px;
    margin: 10px;
}
</style>